<template>
  <div>
    <div>
      <div class="header">
        <span class="search">搜索用户数</span>&nbsp;&nbsp;
        <i class="el-icon-warning-outline"></i>
      </div>
      <div class="main">
        <div class="first">
          <span>123</span> <i class="el-icon-caret-top" style="color:greenyellow"></i>
        </div>
        <div class="two">
           <span>17.1</span> <i class="el-icon-caret-bottom" style="color:red"></i>
      </div>
        </div>
      <div class="footer">
        <div class="chars" ref="chars"></div>
      </div>
    </div>
  </div>  
</template>

<script>
import echarts from "echarts";
export default {
  name: "LineCharts",
  mounted() {
    const lineChart = echarts.init(this.$refs.chars);
    //配置数据
    lineChart.setOption({
      xAxis: {
        show: false,
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: "line",
          data: [1, 6, 5, 4, 9, 4, 5, 7, 2, 6, 3, 5, 4],
          smooth:true,
          itemStyle: {
            opacity: 0,
          }, //拐点样式设置
          lineStyle:{
            color:'blue'
          },
          //填充
          areaStyle: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#fff", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      ],
      //布局
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style l scoped>
.header{
  display: flex;
  align-items: center;

}
.search{
  margin-right: 10px;
}
.main{
  display: flex;
}
.first{
  margin-right: 20px  ;
}
.chars{
  width: 100%;
  height: 50px;
}
</style>>

</style>